<script>
export default {
    name: "ProductClassify"
}
</script>

<script setup>
import { ref, reactive, onMounted, h } from 'vue';
import { Goods_Category } from '@/api';
import UploadPhoto from '@/components/UploadPhoto.vue';

// 获取商品分类
let options = ref([])
let cate_list = async () => {
    let { status, msg, data } = await Goods_Category.tree_list(0);
    if (status === 200) {
        options.value = data;
    } else {
        ElMessage.error(msg);
    }
}

let searchForm = reactive({
    pid: '',
    is_show: '',
    cate_name: '',
})

// 获取表格数据
let cateData = ref([])
let table_data = async () => {
    let { status, msg, data } = await Goods_Category.cate_list();
    if (status === 200) {
        cateData.value = data.list;
    }
}
// 分隔栏
let size = ref(10)
let spacer = h(ElDivider, { direction: 'vertical' })

// 商品分类切换
let handleGoodsCate = async (pid) => {
    searchForm.pid = pid;
    let { status, msg, data } = await Goods_Category.cate_list(searchForm);
    if (status === 200) {
        cateData.value = data.list;
    }
}
// 显示和隐藏的切换
let handleCateShow = async (is_show) => {
    searchForm.is_show = is_show;
    let { status, msg, data } = await Goods_Category.cate_list(searchForm);
    if (status === 200) {
        cateData.value = data.list;
    }
}
// 搜索
let handleSearchCate = async () => {
    let { status, data } = await Goods_Category.cate_list(searchForm);
    if (status === 200) {
        cateData.value = data.list;
        searchForm.cate_name = '';
    }
}
// 分类状态切换
let handleShowChange = async (id, is_show) => {
    let { status, msg } = await Goods_Category.set_status(id, is_show);
    if (status === 200) {
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}

// 编辑分类
let edit_cate_visible = ref(false)
let edit_cate_ref = ref(null)
let editCateForm = reactive({
    pid: '',
    cate_name: '',
    pic: '',
    big_pic: '',
    sort: 0,
    is_show: 1,
})
let pid_options = ref([])
let editCateRules = ref([])
let edit_id = ref('')
let handleCateEdit = async (id) => {
    edit_id.value = id;
    let { status, msg, data } = await Goods_Category.edit_cate_form(id);
    if (status === 200) {
        pid_options.value = data.rules[0].options;
        editCateForm.pid = data.rules[0].value;
        editCateForm.cate_name = data.rules[1].value;
        editCateForm.pic = data.rules[2].value;
        editCateForm.big_pic = data.rules[3].value;
        editCateForm.sort = data.rules[4].value;
        editCateForm.is_show = data.rules[5].value;
        edit_cate_visible.value = true;
    }
}
let pic_show = ref(false)
let big_pic_show = ref(false)
let handleEditCate = async () => {
    let id = edit_id.value;
    let { status, msg } = await Goods_Category.cate_edit(id, editCateForm);
    if (status === 200) {
        ElMessage.success(msg);
        table_data();
        edit_cate_visible.value = false;
    }
}

// 添加分类
let add_cate_visible = ref(false)
let addCateForm = reactive({
    pid: '',
    cate_name: '',
    pic: '',
    big_pic: '',
    sort: 0,
    is_show: 1,
})
let ref_addForm = ref(null)
let addCateRules = ref([])
let add_pic_show = ref(false)
let add_big_pic = ref(false)
let add_cate_options = ref([])
let handleAddCate = async () => {
    let { status, data } = await Goods_Category.add_cate_list();
    if (status === 200) {
        add_cate_options.value = data.rules[0].options;
        add_cate_visible.value = true;
    }
}
let handleSubAdd = async () => {
    let { status, msg } = await Goods_Category.add_cate(addCateForm);
    if (status === 200) {
        ElMessage.success(msg);
        table_data();
        add_cate_visible.value = false;
    }
}
let handleAddCateClose = () => {
    ref_addForm.value.resetFields();
}


// 删除分类
let handleCateRemove = (id, index) => {
    console.log(index);
    ElMessageBox.confirm(
        '确定要删除商品分类吗？',
        '删除商品分类',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Goods_Category.cate_del(id);
            if (status === 200) {
                ElMessage.success(msg);
                table_data();
            }
        })
        .catch(() => {
            ElMessage.info("已取消删除！");
        })
}

onMounted(() => {
    cate_list();
    table_data();
})
</script>

<template>
    <el-card shadow="never">
        <el-form :model="searchForm" class="search-form">
            <el-form-item label="商品分类：">
                <el-select v-model="searchForm.pid" @change="handleGoodsCate" clearable placeholder="请选择商品分类">
                    <el-option v-for="item in options" :key="item.id" :label="item.html + item.cate_name"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类状态：">
                <el-select v-model="searchForm.is_show" @change="handleCateShow" clearable placeholder="请选择商品分类">
                    <el-option label="显示" :value="1" />
                    <el-option label="隐藏" :value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类名称：">
                <el-input v-model="searchForm.cate_name" placeholder="请输入分类名称">
                    <template #append>
                        <el-button icon="Search" @click="handleSearchCate" />
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" icon="Plus" style="margin-bottom:20px;" @click="handleAddCate">添加分类</el-button>
        <el-table :data="cateData" row-key="id" :default-expand-all="false"
            :header-cell-style="{ background: '#f4f3f9', color: '#606266' }">
            <el-table-column prop="id" label="ID" type="" />
            <el-table-column prop="cate_name" label="分类名称" />
            <el-table-column label="分类图标">
                <template #default="scope">
                    <el-image v-show="scope.row.pic" :src="scope.row.pic" fit="fill" style="width:20px" />
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="0" inline-prompt
                        active-text="显示" inactive-text="隐藏" @change="handleShowChange(scope.row.id, scope.row.is_show)" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300px">
                <template #default="scope">
                    <el-space :size="size" :spacer="spacer">
                        <el-button link type="primary" size="small" @click="handleCateEdit(scope.row.id)">编辑</el-button>
                        <el-button link type="primary" size="small"
                            @click="handleCateRemove(scope.row.id, scope.$index)">删除</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 编辑分类 -->
    <el-dialog v-model="edit_cate_visible" title="编辑分类">
        <el-form ref="edit_cate_ref" :model="editCateForm" :rules="editCateRules" label-width="200px" class="demo-ruleForm"
            status-icon>
            <el-form-item label="上级分类">
                <el-select v-model="editCateForm.pid" class="m-2" placeholder="请选择上级分类">
                    <el-option v-for="item in pid_options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类名称">
                <el-input v-model="editCateForm.cate_name" placeholder="请输入分类名称" style="width: 220px;" />
            </el-form-item>
            <el-form-item label="分类图标(180*180)">
                <el-upload class="avatar-uploader" disabled :show-file-list="false" @click="pic_show = true">
                    <img v-if="editCateForm.pic" :src="editCateForm.pic" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <UploadPhoto :is_show="pic_show" v-model="editCateForm.pic" @change="pic_show = false"></UploadPhoto>
            </el-form-item>
            <el-form-item label="分类大图(468*340)">
                <el-upload class="avatar-uploader" disabled :show-file-list="false" @click="big_pic_show = true">
                    <img v-if="editCateForm.big_pic" :src="editCateForm.big_pic" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <UploadPhoto :is_show="big_pic_show" v-model="editCateForm.big_pic" @change="big_pic_show = false">
                </UploadPhoto>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="editCateForm.sort" class="mx-4" controls-position="right" />
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="editCateForm.is_show">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" style="width: 100%;" @click="handleEditCate">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加分类 -->
    <el-dialog v-model="add_cate_visible" title="添加分类" @close="handleAddCateClose">
        <el-form ref="ref_addForm" :model="addCateForm" :rules="addCateRules" label-width="200px" class="demo-ruleForm"
            status-icon>
            <el-form-item label="上级分类" prop="pid">
                <el-select v-model="addCateForm.pid" class="m-2" placeholder="请选择上级分类">
                    <el-option v-for="item in add_cate_options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类名称" prop="cate_name">
                <el-input v-model="addCateForm.cate_name" placeholder="请输入分类名称" style="width: 220px;" />
            </el-form-item>
            <el-form-item label="分类图标(180*180)" prop="pic">
                <el-upload class="avatar-uploader" disabled :show-file-list="false" @click="add_pic_show = true">
                    <img v-if="addCateForm.pic" :src="addCateForm.pic" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <UploadPhoto :is_show="add_pic_show" v-model="addCateForm.pic" @change="add_pic_show = false"></UploadPhoto>
            </el-form-item>
            <el-form-item label="分类大图(468*340)" prop="big_pic">
                <el-upload class="avatar-uploader" disabled :show-file-list="false" @click="add_big_pic = true">
                    <img v-if="addCateForm.big_pic" :src="addCateForm.big_pic" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <UploadPhoto :is_show="add_big_pic" v-model="addCateForm.big_pic" @change="add_big_pic = false">
                </UploadPhoto>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="addCateForm.sort" class="mx-4" controls-position="right" />
            </el-form-item>
            <el-form-item label="状态" prop="is_show">
                <el-radio-group v-model="addCateForm.is_show">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" style="width: 100%;" @click="handleSubAdd">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.search-form {
    display: flex;

    .el-form-item {
        margin-right: 20px;
    }
}

.avatar-uploader .avatar {
    width: 78px;
    height: 78px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    text-align: center;
}
</style>